/*
 * 用户数据大盘
 * @Author: along
 * @Date: 2020-03-31
 */
<template>
    <div
        class="container"
        :class=" 'container' + number "
    >
        <p class="container-title">{{ title }}</p>
        <div
            class="container-wrap"
            v-show="is_data"
        >
            <div
                :id="id"
                class="dataChartsSex"
            />
        </div>
        <div
            class="container-wrap"
            v-show="!is_data"
        >
            暂无数据
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            //是否有数据
            is_data: true
        };
    },
    props: {
        title: {
            type: String,
            default: ()=>{}
        },
        userCount: {
            type: Array,
            default: ()=>{}
        },
        name: {
            type: String,
            default: ()=>{}
        },
        id: {
            type: String,
            default: ()=>{}
        },
        number: {
            type: Number,
            default: ()=>{}
        }
    },
    watch: {
        //父组件值改变自组件内容不更新解决
        userCount : {
            handler: function(newVal, oldval) {
                this.init();
            },
            deep: true
        }
    },
    mounted () {
        setTimeout(()=>{
            // console.log(this.userCount,'22');
            try {
                if(this.userCount.length == 0) {
                    this.is_data = false;
                } else {
                    this.is_data = true;
                    this.init();
                }
            } catch(error) {
                this.is_data = false;
            }
        },800);
    },
    methods: {
        async init () {
            let echarts = document.getElementById(this.id);//唯一id
            let my_echarts = this.$echarts.init(echarts);

            my_echarts.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                series: [
                    {
                        name: this.title,
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: this.userCount,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        min-height: 287px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        .container-title {
            width: 100%;
            height: 48px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #000000;
            position: relative;
            &::after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 84%;
                height: 1px;
                background: #f4f4f4;
            }
        }
        .container-wrap {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #909399;
            #dataChartsSex{
                width: 100%;
                height: 100%;
            }
            .dataChartsSex {
                width: 100%;
                height: 100%;
            }
        }
    }
    .container2{
        width: calc(100% / 2 - 8px);
    }
    .container2{
        width: calc(100% / 3 - 8px);
    }
</style>